<template>
  <div class="page-fs position-relative">
    <button
      style="position: absolute; top: 30px; right: 50px;"
      @click="randomAdd"
    >
      随机添加元素
    </button>
    <button
      style="position: absolute; top: 60px; right: 50px;"
      @click="openRain"
    >
      {{ isOpenRain ? '关闭' : '开启' }}下雨效果
    </button>
    <div style="position: absolute; top: 120px; right: 50px;">
      <input v-model="text">
      <button @click="addText">
        确定
      </button>
      <button @click="add3DText">
        3D
      </button>
    </div>
    <div
      ref="content"
      class="page-fs"
    />
  </div>
</template>

<script>
import ThreeMain from "./ThreeMain";

export default {
    name: "Ntd3d",
    data() {
        return {
            isOpenRain: false,
            text: ''
        }
    },
    mounted() {
      this.$nextTick(() => {
        ThreeMain.init(this.$refs["content"])
      })
    },
    methods: {
        randomAdd() {
            ThreeMain.randomElement()
        },
        openRain() {
            if (this.isOpenRain) {
                ThreeMain.closeRain()
            } else {
                ThreeMain.openRain()
            }
            this.isOpenRain = !this.isOpenRain
        },
        addText() {
            if (this.text && this.text.trim().length > 0) {
                ThreeMain.addText(this.text)
            }
        },
        add3DText() {
            if (this.text && this.text.trim().length > 0) {
                ThreeMain.add3DText(this.text)
            }
        }
    }
}
</script>

<style scoped>
body {
    margin: 0;
}

canvas {
    width: 100%;
    height: 100%
}
</style>